<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
</head>
<style>
    .box_1{
        background-color: gray;
        width: 100%;
        height: 100vh;
        /*让灰色背景铺满屏幕,覆盖audio*/
        position: fixed;
        top: 0;
        left: 0;
    }
    .box_2{
        /*text-align: center;*/
        width: 300px;
        height: 300px;
        background-color: black;
        /*box_2在box_1中垂直水平居中*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        /*两个按钮垂直水平居中*/
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box_2 button:last-child{
        font-size: 16px;
        padding: 10px;
        margin-left: 10px;
        cursor: pointer;
    }
    .box_2 button:first-child{
        font-size: 16px;
        padding: 10px;
        margin-right: 10px;
        cursor: pointer;
    }
    button:hover{
        border: none;
        background-color: pink;
        color: red;
    }
</style>
<body>
<audio id="music" src="小曲.mp3" controls></audio>
<div class="box_1" id="box1">
    <div class="box_2">
        <button>登录</button>
        <button id="music_button" onclick="open_music()">音乐</button>
    </div>
</div>
<script>
    // 方法一:
    //     let music_button=document.getElementById('music_button')
    //     let box=document.getElementById('box1')
    //     music_button.addEventListener("click",function (){
    //         box.style.display="none"
    //         let audio=document.getElementById('music')
    //         audio.play()
    //     })

    // 方法二:
        function open_music(){
            box1.style.display="none"
            music.play()
        }
</script>
</body>
</html>